<template>
    <nav class="navbar navbar-expand-lg bg-body-tertiary" style="background-color: #e3f2fd;">
        <div class="container">
            <img class="logo" src="../assets/QQ图片20220530151354.png" alt="图片"> |
            <router-link :to="{name : 'home'}" class="navbar-brand break" href="#">医学影像分割系统</router-link>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarText">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">           
            </ul>
            <ul class="navbar-nav">
                <li class="nav-item">
                <router-link :to="{name : 'login'}" class="nav-link">登录</router-link>
                </li>
                <li class="nav-item">
                <router-link :to="{name: 'rigester'}" class="nav-link" href="#">注册</router-link>
                </li>
            </ul>
            </div>
        </div>
    </nav>
    <div class="backcolor">
        <div class="middle">
            <div class="card container box a" style="height: 24rem; margin-Top:200px; width: 800px; background-color: rgba(255, 255, 255, 60%);border-radius: 1.5rem;">
                <div class="card-body">
                    <div class="row justify-content-md-center">
                        <h1 style="text-align:center">用 户 登 录</h1>
                        <hr>
                        <div class="col col-sm-6 middle">
                            <form @submit.prevent="login" method="POST">
                                <div class="mb-3">
                                    <label for="username" class="form-label">邮箱</label>
                                    <input v-model="loginform.email" id = "id" type="text" class="form-control"  aria-describedby="emailHelp" name="group_id" >
                                </div>
                                <div class="mb-3">
                                    <label for="password" class="form-label">密码</label>
                                    <input v-model="loginform.password" id="password"  type="password" class="form-control" name="password">
                                </div>
                                <div id="info" style="height:2rem; color:red; text-align: center;">{{ loginform.error }}</div>
                                <button id="login" type="submit" style="width:100%;" class="btn btn-primary">登录</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</template>

<script>
import 'bootstrap/dist/js/bootstrap.min.js'
import 'bootstrap/dist/css/bootstrap.css'
import axios from 'axios'

    export default {
        name : 'LoginView',
        components : {
        },
        data() {
            return {
                loginform :{
                    email:'',
                    password: '',
                    error:''
                }
            }
        },
        methods: {
            login () {
                const path = 'http://127.0.0.1:5000/auth/login'
                axios.post(path, this.loginform)
                .then((response) => {
                    if (response.data == 'success') {
                        alert("登录成功")
                        this.$router.push('/')
                    }
                    else if (response.data == 'emailerror'){
                        this.loginform.error = '该邮箱不存在'
                        return 
                    }
                    else {
                        this.loginform.error = '密码错误'
                    }
                })
            }
        }   
    }
</script>

<style scoped>
h1 {
  color: rgb(144, 129, 241);
  margin-top: 5rem;
}
.logo{
    height: 30px;   
    margin-right: 10px;
    position: relative;
    border-radius: 50%;
}
.break{
    margin-left: 10px;
}
.margintop{
    margin-top: 20vh;
}
button {
    width :100%
}

.margin{
    margin-bottom: 5px;
}
.margin0{
    margin-right: 0;
}

h1{
    margin-top: 5px;
}
.box{
    border-radius: 1.5rem;
    background-color: rgb(232,231,254);
    box-shadow: 0 0 1rem 0.2rem rgb(0 0 0 / 10%);
}

.height{
    height: 21rem;
}

.error{
    color:red;
    margin-bottom: 5px;
}

.backcolor{
    position:absolute;
    height: 93.9%;
    width: 100%;
    background: linear-gradient(120deg, #e0c3fc, #8ec5fc 100%)no-repeat;
}
</style>
